import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:life_milestones/controller/MS-global-user-controller.dart';
import 'package:life_milestones/controller/MS-home-controller.dart';
import 'package:stroke_text/stroke_text.dart';
import 'package:provider/provider.dart';

import '../../component/MS-select-time-view.dart';
import '../MS-main-page.dart';
class MSHomePage extends StatefulWidget {
  const MSHomePage({super.key});

  @override
  State<StatefulWidget> createState() {
    return _MSHomePageState();
  }
}

class _MSHomePageState extends State<MSHomePage> {
  @override
  Widget build(BuildContext context) {
    return Consumer<MSHomeController>(builder: (BuildContext context,MSHomeController controller,Widget? c){
      return Scaffold(
        backgroundColor: const Color(0xFFF9FADA),
        body: Column(
          children: [
            Container(
              width: double.infinity,
              height: 130.w + ScreenUtil().statusBarHeight,
              color: const Color(0xFF148857),
              child: Padding(
                padding: EdgeInsets.only(top: ScreenUtil().statusBarHeight),
                child: Stack(
                  children: [
                    Image.asset(
                      "images/home-header-bg.png",
                      width: double.infinity,
                      fit: BoxFit.fitWidth,
                    ),
                    Positioned(top: 10.w,left: 35.w,child: StrokeText(text:"5 Times Free",textStyle: TextStyle(
                      fontSize: 20.sp,
                      fontWeight: FontWeight.w900,
                      color: Colors.white,
                    ),strokeWidth: 3.w,strokeColor: Color(0xFF065F39),textColor: Colors.white,),),
                    Padding(
                      padding:
                      EdgeInsets.only(top: 60.w, left: 24.w, right: 24.w),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          InkWell(
                            child: Container(
                              width: 152.w,
                              height: 50.w,
                              decoration: const BoxDecoration(
                                  image: DecorationImage(
                                      image: AssetImage(
                                          "images/home-header-button-bg.png"))),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  Padding(
                                    padding: EdgeInsets.only(right: 10.w),
                                    child: Image.asset(
                                      "images/home-list-icon.png",
                                      width: 25.w,
                                      fit: BoxFit.fitWidth,
                                    ),
                                  ),
                                  Image.asset(
                                    "images/home-list-label.png",
                                    width: 43.w,
                                    fit: BoxFit.fitWidth,
                                  )
                                ],
                              ),
                            ),
                          ),
                          InkWell(
                            onTap: (){
                              if(controller.categories.length < 5 || (MSGlobalUserController().user!.availableCoins ?? 0) > 9){
                                Navigator.of(context).pushNamed("/group-edit");
                              }else{
                                Navigator.of(context,rootNavigator:true).pushNamed("/store");
                              }

                            },
                            child: Container(
                              width: 152.w,
                              height: 50.w,
                              decoration: const BoxDecoration(
                                  image: DecorationImage(
                                      image: AssetImage(
                                          "images/home-header-button-bg.png"))),
                              child:Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  Padding(
                                    padding: EdgeInsets.only(right: 10.w),
                                    child: Image.asset(
                                      "images/home-add-icon.png",
                                      width: 25.w,
                                      fit: BoxFit.fitWidth,
                                    ),
                                  ),
                                  // Image.asset(
                                  //   "images/home-add-label.png",
                                  //   width: 82.w,
                                  //   fit: BoxFit.fitWidth,
                                  // )
                                  StrokeText(
                                    text: "Add/Edit",
                                    strokeColor: Color(0xFF065F39),
                                    strokeWidth: 3.w,
                                    textColor: Colors.white,
                                    textStyle: TextStyle(
                                        fontSize: 16.sp, fontWeight: FontWeight.bold),
                                  )
                                ],
                              ),
                            ),

                          )
                        ],
                      ),
                    ),
                    Positioned(
                        top: 32.w,
                        right: 24.w,
                        child: Container(
                      width: 61.w,
                      height: 29.w,
                      padding: EdgeInsets.only(left: 9.w,top: 6.w),
                      decoration: const BoxDecoration(
                        image: DecorationImage(
                          image: AssetImage("images/coin-bg.png")
                        )
                      ),
                          alignment: Alignment.topLeft,
                          child: Text("9 coins",style: TextStyle(fontSize: 12.sp,color: Colors.white,fontWeight: FontWeight.w600),),
                    ))
                  ],
                ),
              ),
            ),
            Expanded(child: Stack(
              children: [
                Positioned(
                    left:0,
                    right: 0,
                    top: 0,
                    bottom: 125.w,
                    child: ListView.builder(
                  padding: EdgeInsets.only(top: 20.w),
                  itemBuilder: (BuildContext context,int index){
                    var category = controller.categories[index];
                    return Padding(
                        padding: EdgeInsets.only(bottom: 10.w,left: 23.w,right: 24.w),
                        child: Container(
                          height: 68.w,width: 328.w,
                          decoration: const BoxDecoration(
                              image: DecorationImage(image: AssetImage("images/home-list-bg.png"))
                          ),
                          padding: EdgeInsets.only(left: 17.w,right: 14.w),
                          child: Row(
                            children: [
                              Padding(padding: EdgeInsets.only(right: 13.w),child: Image.asset(category.items.isNotEmpty && category.amountOfPending == 0 ? "images/home-finished.png":"images/home-pending.png",width: 54.w,fit: BoxFit.fitWidth,),),
                              Expanded(child: Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(category.name,style: TextStyle(fontSize: 18.sp,color: Color(0xFF7A3F17),fontWeight: FontWeight.bold,height: 1.1),),
                                  UnconstrainedBox(
                                    child: Builder(
                                      builder: (BuildContext context){
                                        return InkWell(
                                          onTap: (){
                                            if (MSMainPage.of(context) != null) {
                                              showModalBottomSheet(
                                                  context: MSMainPage.of(context)!
                                                      .context,
                                                  builder:
                                                      (BuildContext context) {
                                                    return MSSelectTimeView(
                                                      onSelected:
                                                          (String? value) {
                                                        if(value != null){
                                                          category.time = value;
                                                          controller.updateCategory(category);
                                                        }
                                                      },
                                                    );
                                                  });
                                            }
                                          },
                                          child: Container(
                                              padding: EdgeInsets.symmetric(horizontal: 20.w),
                                              height: 20.w,
                                              alignment: Alignment.center,
                                              decoration: BoxDecoration(
                                                  color: Color(0xFFBB815A),
                                                  borderRadius: BorderRadius.circular(10.w)
                                              ),
                                              child: Text(category.time == "0" ? "add time" :category.time,style: TextStyle(fontSize: 12.sp,color: Colors.white,fontWeight: FontWeight.w500),)),
                                        );
                                      },
                                    ),
                                  )
                                ],)),
                              Padding(padding: EdgeInsets.symmetric(horizontal: 8.w),child: Text("${category.amountOfFinished}/${category.items.length}",style: TextStyle(fontSize: 18.sp,color: Color(0xFF7A3F17),fontWeight: FontWeight.bold),),),
                              InkWell(
                                onTap: (){
                                  Navigator.of(context).pushNamed("/group-detail",arguments: category.id);
                                },
                                child: Image.asset("images/home-arrow-right.png",width: 25.w,fit: BoxFit.fitWidth,),)
                            ],
                          ),
                        ));
                  },itemCount: controller.categories.length,)),
                Positioned(right: -46.w, bottom: -35.w, child: Image.asset("images/home-people.png",width: 288.w, fit: BoxFit.fitWidth,))
              ],
            )),
          ],
        ),
      );
    });
  }
}
